<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="js/vue.js"></script>
<body>
    <div id="app">
        <!-- 复选框分为两种，单选复选框和多选复选框 -->
        <!-- 单个复选框中v-model值为 布尔值 -->
        <!-- 复选框分单独使用的住和使用两种情况，复选鲁昂单独使用时，v-model绑定的是
            布尔值，选中时值为true 未选中时值为false-->
        <label for="license">
            <input id="license" type="checkbox" v-model="isAgress">同意协议
        </label>
        <P>您的选中的是{{isAgress}}</P>
        <button :disable="!isAgress">下一步</button>

        <br>
        <br>
        <!-- 多个复选框v-model值是一个数组 -->
        <input type="checkbox" value="篮球" v-model="hobbies">篮球
        <input type="checkbox" value="足球" v-model="hobbies">足球
        <input type="checkbox" value="排球" v-model="hobbies">排球
        <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
        <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球

        <p>你选择的是:{{hobbies}}</p>
    </div>
    
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            isAgress:"fasle",
            hobbies:[]
        }
    })
</script>
</html>